<template>
  <div id="subpage">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <b>图库管理</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item>图库列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div class="content">
      <div class="xcx-head">
        <div style="display: flex">
          <span>图库列表</span>
        </div>
        <el-button slot="left" size="small" type="primary" @click="createCat(false)">添加分类</el-button>
        <!-- <span class="xcx-add left font14" @click="add()">添加合作伙伴</span> -->
      </div>
      <div class="xcx-content">
        <el-table border :data="datas" stripe style="width: 100%" v-loading="loading">
          <el-table-column align="center" prop="category_id" label="分类ID" width="100"></el-table-column>
          <el-table-column align="center" prop="name" label="分类名称" width="200"></el-table-column>
          <el-table-column></el-table-column>
          <el-table-column align="center" label="操作" width="160">
            <template slot-scope="scope">
              <el-button style="margin-right: 20px" size="small" type="primary" @click="editCat(scope.row)">编辑</el-button>
              <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" @confirm="deleteCat(scope.row)"
                icon="el-icon-info" iconColor="red" title="确定删除吗？">
                <el-button slot="reference" size="small" type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <!--编辑新增 弹窗-->
        <el-dialog top="30vh" :append-to-body="true" :visible.sync="dialog" width="380px">
          <el-form :model="form" style="padding: 0" v-loading="subLoading">
            <el-form-item label="分类名称" label-width="80px">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label-width="80px">
              <el-button @click="dialog = false">取 消</el-button>
              <el-button type="primary" @click="createCat(true)">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  geCattIndex,
  createCat,
  editCat,
  deleteCat,
} from "../../request/api/setting/resource";

export default {
  name: "resoureCat",
  //components: {WxbTitle},
  data() {
    return {
      //修改 添加 弹窗  菊花
      subLoading: false,
      //整体列表 菊花
      loading: false,
      //列表数据 包含 list count limit
      datas: [],
      //修改 添加 状态控制
      dialog: false,
      //修改 添加 form
      form: {
        name: "", // 标题
      },
      categoryId: 0,
    };
  },
  created() {
    this.getCatList();
  },
  methods: {
    /**
     * 获取分类列表
     */
    getCatList() {
      this.loading = true;
      geCattIndex({})
        .then((res) => {
          this.datas = res;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 添加分类
     * @param sub {boolean} 是否是 提交操作
     */
    createCat(sub = true) {
      if (sub == false) {
        this.dialog = true;
        this.form.name = "";
        this.categoryId = 0;
      } else {
        this.subLoading = true;
        var act = createCat;
        if (this.categoryId > 0) {
          act = editCat;
        }
        act({
          name: this.form.name,
          category_id: this.categoryId,
        })
          .then(() => {
            this.form.name = "";
            this.subLoading = false;
            this.dialog = false;
            this.$message({
              message: "恭喜你，操作成功",
              type: "success",
            });
            this.getCatList();
            this.$emit("change");
          })
          .catch(() => {
            this.subLoading = false;
          });
      }
    },

    /**
     * 删除分类
     * @param row {data} 操作的记录数据对象
     */
    deleteCat(row) {
      console.log(row);
      this.loading = true;
      deleteCat({
        category_id: row.category_id,
      })
        .then(() => {
          this.getCatList();
          this.loading = false;
          this.$message({
            message: "恭喜你，操作成功",
            type: "success",
          });
          this.$emit("change");
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 修改分类弹出
     * @param row {data} 操作的记录数据对象
     */
    editCat(row) {
      this.dialog = true;
      this.form.name = row.name;
      this.categoryId = row.category_id;
      this.form.category_id = row.category_id;
    },
  },
};
</script>


<style></style>
